Форум

Lu_smith · #1 (**permalink**) 15.06.2016, 12:00

Здравствуйте, помогите пожалуйста.
Дано: разнотипные поля (hidden, submit, file) без формы <form>
Задача: с помощью js создать форму, закинуть в нее значения со всех данных полей, всё это передать файлу php ( а точнее в обработку php-скрипта, который находится в этом же файле), и вывести результат(ответ) php-скрипта на эту же страницу без перезагрузки.

Файл для загрузки - это excel
Все остальные поля тоже должны быть переданы в управление/обработку php
Тег <form> использовать нельзя/не надо.

Сделала скрипт, отдает ответ положительный, о том что всё передано, но в msg показы данные только с поля type=file, а в php ничего не приходит и не выводится.

Периодически ругается еще

"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/."

Помогите пожалуйста.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>

<div id="excelload">
	<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
	Выберите файл:
	<input name="userfile" id="load_file" type="file" value="" />
	<input type="submit" value="Загрузить" name="submit_load" id="submit_load" />
</div>

<p class="modal"></p>

<script>
$('#excelload #submit_load').click(function() {

var formData = new FormData();

formData.append('MAX_FILE_SIZE', $('#excelload input[type=hidden]').val());
formData.append('submit_load', $('#excelload input[type=submit]').val());
formData.append('userfile', $('#excelload input[type=file]')[0].files[0]);

/*var xhr = new XMLHttpRequest();
  xhr.open("POST", "<? echo $_SERVER['REQUEST_URI'] ?>", true);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data;');
  xhr.send(formData);*/
 
$.ajax({
    type: "POST",
    url: "<? echo $_SERVER['REQUEST_URI'] ?>",
	//dataType: "json",
    data: formData,
	
    contentType: false,
    processData: false,
    success: function(msg) {
        $(".modal").html("<code>GooD!"+msg+"</code>");
    },
    error: function() {
        $(".modal").html("<pre>Sorry! Couldn't process your request.</pre>");
    }
});

});

</script>

<?php

if(isset($_POST['submit_load'])) {
	$data1 = $_FILES;
	$data1_name = $_FILES['userfile']['name'];
	
	$data2 = $_POST;
	
    echo json_encode($data1);
    echo json_encode($data1_name);
	
    echo json_encode($data2);
}

?>

</body>
</html>

laimas · #2 (**permalink**) 15.06.2016, 12:58

formData.append('MAX_FILE_SIZE', $('#excelload input[type=hidden]').val()); - зачем?

Lu_smith · #3 (**permalink**) 15.06.2016, 13:02

Для дальнейшей обработки в php скрипте. Мне сейчас нужно чтобы php скрипт получил все данные с полей и просто вывел их в print_r, echo И т.д чтобы удостоверится что эти данные и вправду отправились и пришли.

laimas · #4 (**permalink**) 15.06.2016, 13:15

Сообщение от Lu_smith

Для дальнейшей обработки в php скрипте.

Для какой обработки? Что это вообще и зачем? Если о макс. размер разрешенный для загрузки, то это сервер и так знает, а если для клиента, то этот параметр должен быть условием, а не гоняться скрытм полем.

Загрузка файлов - FileReader.

Lu_smith · #5 (**permalink**) 15.06.2016, 13:31

Хорошо. MAX_FILE_SIZE здесь не нужен. Абстагируемся.
Мне нужно чтобы пхп получил все значения с полей, и вывел на эту страницу

<?php

if(isset($_POST['submit_load'])) {

    $data1_name = $_FILES['userfile']['name'];
    $data2 = $_POST;
	
    echo json_encode($data1_name);
    echo json_encode($data2);
}

?>

laimas · #6 (**permalink**) 15.06.2016, 13:31

А почему нельзя использовать форму? Чем опасен тег form?

Lu_smith · #7 (**permalink**) 15.06.2016, 13:41

Потому что мне нужно именно так. Если бы мне нужно было использовать форму я бы так и сделала. Спасибо что пытаетесь помочь, но мне нужно решить эту задачу именно с таким Дано.

pureJS · #8 (**permalink**) 15.06.2016, 14:02

Lu_smith, сначала файл надо считать через FileReader и только потом отправить через AJAX. Подробно об отправке файлов через AJAX-POST читай тут (с примерами):
Новые возможности XMLHttpRequest2

Как считать через FileReader читай начиная вот отсюда.

laimas · #9 (**permalink**) 15.06.2016, 14:02

Ну а зачем тогда input type="submit"?
Юмористы )

<?
if($_FILES) {
    exit(print_r($_FILES, 1));
}
?>
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> 
$(function() {
    $('#f').change(function() {
        var f = new FormData();
        f.append(this.name, this.files[0])
        $.ajax({
            type: "POST",
            url: location,
            data: f,
            contentType: false,
            processData: false,
            success: function(msg) {
                alert(msg)
            },
            error: function() {
                //
            }
        });
    })
});
</script>     
</head> 

<body>
<input type="file" name="upl" id="f" />
</body> 
</html>

Lu_smith · #10 (**permalink**) 15.06.2016, 14:47

К сожалению данные файла не поступают в обработку php. Данные из "формы"/полей должны поступить в php. То есть в php код if($_FILES['userfile']['name'] != '') или if($_POST != 0) в этих переменных должны лежать данные с полей, и, при условии что в эти переменные действительно чтото пришло, выполнится последующий php код (загрузить/изменить/ и т.д) и далее при успешном выполнеии php, на страницу вывести слово/текст с помощью Ajax.
Извините, если не совсем понятно выражаюсь.

Форум

Справочник

Discord чат

Курсы javascript